<template>
  <div class="expense-account">
    <div class="main_title">
      <el-tabs v-model="firstType" @tab-click="handleClick">
        <el-tab-pane :name="item.id" v-for="item in boardTabsData" :key="item.id">
          <span slot="label">{{ item.name }}</span>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main_con" v-if="pageShow">
      <apply-list :userType="userType" :firstType="firstType"></apply-list>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ApplyList from './components/applyList'
export default {
  name: 'expenseAccount',
  components: { ApplyList },
  props: {},
  data() {
    return {
      boardTabsData: [
        { name: '出差审批表', id: '1' },
        { name: '差旅费报销单', id: '2' },
      ],
      firstType: '1',
      userType: '1', // 1.申报人；2.蒋林冬；3.局领导；4:出差审核;5:差旅审核
      pageShow: false,
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', [
      'isOtherRole',
      'isNormalRole',
      'isOrgRole',
      'isPartRole',
      'isReimburseRole',
      'isBusinessRole',
    ]),
  },
  created() {},
  mounted() {
    const menu = []
    if (this.isOtherRole || this.isNormalRole) {
      menu.push({ name: '出差审批表', id: '1' }, { name: '差旅费报销单', id: '2' })
    }
    if (this.isOrgRole || this.isPartRole) {
      menu.unshift(
        { name: '出差前审核', id: '3' },
        { name: '差旅费审核', id: '4' },
        { name: '出差审批表', id: '1' },
        { name: '差旅费报销单', id: '2' }
      )
      this.userType = '4'
    }

    if (this.isReimburseRole) {
      menu.unshift({ name: '差旅费审核', id: '4' })
      this.userType = '5'
    }
    if (this.isBusinessRole) {
      menu.unshift({ name: '出差前审核', id: '3' })
      this.userType = '4'
    }

    this.boardTabsData = Array.from(new Set(menu.map(JSON.stringify))).map(JSON.parse)

    if (this.$route.query.id) {
      if (this.$route.query.formType === '1') {
        // 出差审核
        this.firstType = this.$route.query.operate === '1' ? '3' : '1'
      } else if (['2', '3'].includes(this.$route.query.formType)) {
        // 差旅审核
        this.firstType = this.$route.query.operate === '1' ? '4' : '2'
      }
    } else {
      this.firstType = this.boardTabsData[0].id
    }
    this.pageShow = true
  },
  methods: {
    handleClick() {},
  },
}
</script>
<style lang="scss" scoped>
.expense-account {
  height: 100%;
  width: 100%;
  .main_title {
    height: 50px;
    border-bottom: 1px solid #fff;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 20px;
  }
  .main_con {
    height: calc(100% - 50px);
  }
}
</style>
